<template>
  <div class="bank">
    <div class="order">
      <span>订单金额：</span
      ><span class="money"
        >￥<md-amount :value="money" has-separator></md-amount></span
      >元
    </div>
    <div class="form">
      <md-field>
        <md-field-item
          title="支付银行卡:"
          :content="form.bankName"
          @click="showSelector"
          arrow
          solid
        ></md-field-item>
        <input-validate
          v-model="form.password"
          placeholder="请输入您的支付密码"
          v-validate="'required'"
          name="password"
          title="支付密码"
          type="password"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="您的支付密码"
          :error="errors.first('password')"
        >
        </input-validate>
      </md-field>
      <div class="btn-wrapper">
        <md-button type="default" round class="btn" @click="pay"
          >确定支付</md-button
        >
      </div>
    </div>
    <md-selector
      v-model="isSelectorShow"
      :default-value="defaultBankId"
      :data="data"
      max-height="320px"
      title="支付银行卡"
      @choose="onSelectorChoose"
    ></md-selector>
  </div>
</template>

<script>
import { Amount, Field, Selector, FieldItem, Button } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Button.name]: Button,
    [Amount.name]: Amount,
    [Selector.name]: Selector,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      isSelectorShow: false,
      defaultBankId: "",
      data: [],
      money: 520,
      form: {
        password: "",
        bankName: "",
        bankId: ""
      }
    };
  },
  methods: {
    showSelector() {
      this.isSelectorShow = true;
    },
    onSelectorChoose({ text, value }) {
      this.form.bankName = text;
      this.form.bankId = value;
    },
    getBankList() {
      this.$ajax
        .post(this.$api.cardList)
        .then(res => {
          this.formatData(res.data.data);
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    formatData(data) {
      data.forEach(item => {
        let obj = {};
        obj.text = item.bank_num + "【" + item.bank_name + "】";
        obj.value = item.id;
        this.data.push(obj);
      });
      if (data.length > 0) {
        this.defaultBankId = this.data[0].value;
        this.form.bankName = this.data[0].text;
        this.form.bankId = this.data[0].value;
      }
    },
    pay() {
      this.$validator.validate().then(result => {
        if (result) {
          this.$commonJs.goPage("shoppingPaySuccess");
        }
      });
    }
  },
  created() {
    this.getBankList();
  }
};
</script>

<style scoped lang="stylus">
.bank{
  height 100%
  background white
  .order{
    padding 100px 0;
    background color-primary
    color:rgba(255,254,254,1);
    font-size 30px
    text-align center
    font-weight 400
    font-family:PingFang-SC-Regular;
    .money{
      font-size 60px
    }
  }
  .form{
    padding 70px 73px
    .btn-wrapper{
      text-align center
      margin-top 70px
      .btn{
        width 406px
        margin 0 auto
      }
    }
  }
}
</style>
